import ExportJsonExcel from 'js-export-excel';
import { Button, Table, Pagination } from "antd";
import ChinaMap from "../../components/chinaMap";
function Goodscount() {

  const data = [
    {
      name: "jack",
      age: 18
    },
    {
      name: "小明",
      age: 20
    },
    {
      name: "子豪",
      age: 22
    }
  ]

  const onExprotExcel = () => {
    if (data && data.length > 0) { //data是数组需要导出的数据
      const getRepaymentPlanList = JSON.parse(JSON.stringify(data))
      const option = []; //option代表的就是excel文件
      option.fileName = "硕硕"
      const sheetData = getRepaymentPlanList; // 有需要映射的话需要先映射
      const sheetFilter = ["name", "age"];// 
      const sheetHeader = ['姓名', '年龄'];//列名
      option.datas = [{
        sheetData,
        sheetName: "个人信息表",
        sheetFilter,
        sheetHeader,
        columnWidth: new Array(sheetHeader.length).fill(20),
      }];
      let toExcel = new ExportJsonExcel(option);  // 生成excel文件
      toExcel.saveExcel();  // 下载excel文件 
    }
  }
  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      defaultSortOrder: 'descend',
      sorter: (a, b) => a.age - b.age,
    },
    {
      title: '住址',
      dataIndex: 'address',
      key: 'address',
    },


  ];
  const datas = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sydney No. 1 Lake Park',
    },
    {
      key: '4',
      name: 'Jim Red',
      age: 32,
      address: 'London No. 2 Lake Park',
    },
  ];
  const onChange = (pagination, filters, sorter, extra) => {
    console.log('params', pagination, filters, sorter, extra);
  };
  // 分页

  const dataList =  [
        {
            "area": "山东",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "福建",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "台湾",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "河北",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "河南",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "重庆",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "湖北",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "湖南",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "江西",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "海南",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "黑龙江",
            "userNum": 88,
            "payUserNum":99,
            "payAmount": "120.00"
        },
        {
            "area": "天津",
            "userNum": 1,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "贵州",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "陕西",
            "userNum": 1,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "新疆",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "澳门",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "江苏",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "安徽",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "西藏",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "吉林",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "上海",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "山西",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "甘肃",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "宁夏",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "香港",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "四川",
            "userNum": 1,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "其他",
            "userNum": 2332,
            "payUserNum": 79,
            "payAmount": "1071898.16"
        },
        {
            "area": "浙江",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "广西",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "云南",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "内蒙古",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "辽宁",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "广东",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "青海",
            "userNum": 0,
            "payUserNum": 0,
            "payAmount": "0.00"
        },
        {
            "area": "北京",
            "userNum": 1,
            "payUserNum": 1,
            "payAmount": "5590.51"
        }
    ];


  // const option = {
  //   title: {
  //     text: "数据地图",
  //     // subtext: "数据来源于阿里云平台",
  //     // sublink: "https://datav.aliyun.com/portal/school/atlas/area_selector",
  //     left: "right",
  //     textStyle: {
  //       color: "#000",
  //     },
  //   },
  //   // 提示框
  //   tooltip: {
  //     trigger: "item",
  //     showDelay: 0,
  //     transitionDuration: 0.2,
  //     formatter: (params) => {
  //       let obj={}
  //       // "area": "山东",
  //       // "userNum": 0,
  //       // "payUserNum": 0,
  //       // "payAmount": "0.00"
  //       dataList.map(item=>{
  //         if(params.name.includes(item.area)){
  //            obj=item
  //         }
  //       })
  //       return `
  //         <div>
  //           <p>地区:${obj.area}</p>
  //           <p>支付金额:${obj.payAmount}</p>
  //           <p>成交用户数量: ${obj.payUserNum}</p>
  //           <p>累计用户数量:${obj.userNum}</p>
  //         </div>
  //       `;
  //     },
  //   },
  //   // 工具导航

  //   // 地图数据
  //   dataset: {
  //     source: dataList,
  //   },
  //   series: {
  //     type: "map",
  //     map: "china",
  //     // roam: true, // 地图拖动、缩放
  //     top: "10%", // 距离顶部距离
  //     zoom: 1.5, // 当前视角的缩放比例
  //     scaleLimit: {
  //       max: 2,
  //       min: 1, // 设置默认缩放效果
  //     },
  //     // 文本标签，地区名, 控制样式，位置等等，可以是数组，多个
  //     label: {
  //       show: true, // 默认状态下，显示省市名称
  //       position: [1, 100], // 相对的百分比
  //       fontSize: 12,
  //       offset: [2, 0],
  //       align: "left",
  //     },

  //   },


  // };

// 创建地图实例

// 设置地图参数
var option = {
 
    tooltip: {
        trigger: 'item',
        formatter: (params) => {
          let obj={}
          
          dataList.map(item=>{
            if(params.name.includes(item.area)){
               obj=item
            }
          })
          return `
            <div>
              <p>地区:${obj.area}</p>
              <p>支付金额:${obj.payAmount}</p>
              <p>成交用户数量: ${obj.payUserNum}</p>
              <p>累计用户数量:${obj.userNum}</p>
            </div>
          `;
        },
    },

    series: [
        {
            name: '中国地图',
            type: 'map',
            map: 'china',
         
            emphasis:{
              label:{
                show:true
              }
            },
            label: {
              // show: true, // 默认状态下，显示省市名称
              // fontSize: 10,
            
            },
  
            data: dataList
        }
    ]
};

// 使用刚指定的配置项和数据显示图表

  return (
    <div>
      商品统计


      <Button type="primary" shape="round" onClick={onExprotExcel}>导出</Button>

      <Table
        columns={columns}
        dataSource={datas}
        onChange={onChange}
        showSorterTooltip={{
          target: 'sorter-icon',
        }}
        pagination={{
          defaultCurrent: 3,
          total: 500,
          showQuickJumper: true
        }}

      />

      <h1>中国地图</h1>
      <ChinaMap option={option} height="80vh" width="100%" />;
    </div>
  );
}

export default Goodscount;